<template>
  <div>
    <el-row type="flex" class="hotelTab">
      <!-- 城市搜索 -->
      <el-autocomplete
        v-model="form.cityName"
        :fetch-suggestions="querySearchAsync"
        placeholder="切换城市"
        @select="handleSelect"
        :trigger-on-focus="false"
      ></el-autocomplete>

      <!-- 日期选择 -->
      <el-date-picker
        v-model="form.enterTime"
        type="daterange"
        range-separator="-"
        start-placeholder="入住日期"
        end-placeholder="离店日期"
        @change="changeDate"
        :picker-options="pickerOptions"
      ></el-date-picker>

      <!-- 人数选择 -->
      <el-input
        placeholder="人数未定"
        suffix-icon="el-input__icon iconfont iconuser"
        v-model="numPeo"
        class="numPeo"
      ></el-input>
      <el-popover placement="top" width="380" v-model="visible">
        <el-row type="flex" class="numberPeo">
          <div style="width:100px;line-height: 28px;">每间</div>
          <div class="choes">
            <el-select
              v-model="optionsValue"
              placeholder="请选择成人人数"
              popper-class="choesSele"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div style="margin-left:10px">
            <el-select v-model="chilidrenValue" placeholder="请选择儿童人数">
              <el-option
                v-for="item in children"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </el-row>
        <div
          style="text-align: right; margin-top: 20px; padding-top:20px; border-top:1px solid #ddd"
        >
          <el-button type="primary" size="mini" @click="selectClick"
            >确定</el-button
          >
        </div>
        <el-button slot="reference" class="numberBtn"></el-button>
      </el-popover>
      <el-button type="primary" @click="searchHotel">查看价格</el-button>
    </el-row>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      options: [
        {
          value: "1成人",
          label: 1
        },
        {
          value: "2成人",
          label: 2
        },
        {
          value: "3成人",
          label: 3
        },
        {
          value: "4成人",
          label: 4
        },
        {
          value: "5成人",
          label: 5
        }
      ],
      optionsValue: "",
      children: [
        {
          value: "0",
          label: 0
        },
        {
          value: "1儿童",
          label: 1
        },
        {
          value: "2儿童",
          label: 2
        },
        {
          value: "3儿童",
          label: 3
        },
        {
          value: "4儿童",
          label: 4
        },
        {
          value: "5儿童",
          label: 5
        }
      ],
      chilidrenValue: "",
      visible: false,
      numPeo: "",
      form: {
        cityName: "",
        city: "",
        enterTime: ""
      },
      formData: {
        cityId: "",
        cityName: "",
        enterTime: "",
        leaveTime: "",
        adult: "",
        children: ""
      },
      // 禁止选择已过日期
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      }
    };
  },

  methods: {
    // 搜索获取城市列表
    getCityList(value) {
      return this.$axios({
        url: "/cities",
        params: {
          name: value
        }
      }).then(res => {
        if (res.data.data == []) {
          this.form.city = res.data.data[0].id;
        }
        const cityList = res.data.data.map(val => {
          return {
            value: val.name,
            id: val.id,
            scenics: val.scenics
          };
        });
        return cityList;
      });
    },

    // 切换城市输入时触发事件
    querySearchAsync(value, cb) {
      this.getCityList(value).then(res => {
        if (res.length > 0) {
          cb(res);
        } else {
          cb([
            {
              value: "没有找到该城市"
            }
          ]);
        }
      });
    },

    // 选择下拉列表触发事件
    handleSelect(value) {
      console.log(value);
      this.form.city = value.id;
      this.$emit("sendScenics", value);
      this.formData.cityId = value.id;
      this.formData.cityName = value.value;
    },

    // 修改日期yyyy-mm-dd
    changeDate(value) {
      if (value) {
        const entertime = new Array();
        entertime.push(moment(value[0]).format("YYYY-MM-DD"));
        entertime.push(moment(value[1]).format("YYYY-MM-DD"));
        this.form.enterTime = entertime;
        this.formData.enterTime = entertime[0];
        this.formData.leaveTime = entertime[1];
      }
    },

    selectClick() {
      this.visible = false;
      if (this.chilidrenValue == "0") {
        this.numPeo = this.optionsValue;
      } else {
        let chosepeo = this.optionsValue + this.chilidrenValue;
        this.numPeo = chosepeo;
      }
      this.formData.adult = parseInt(this.optionsValue);
      this.formData.children = parseInt(this.chilidrenValue);
    },

    searchHotel() {
      this.$emit("sendData", this.formData);
    }
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
.hotelTab {
  margin: 20px 0;
  > div {
    margin-right: 15px;
  }
  .el-input--suffix {
    width: 193px;
  }

  .numPeo {
    caret-color: transparent;
    z-index: inherit;
  }
  .numberBtn {
    position: absolute;
    right: 249px;
    top: 0;
    background-color: transparent;
    width: 193px;
    height: 40px;
    cursor: text;
  }
  .numberPeo {
    height: 28px;
    > div {
      margin-left: 10px;
    }
    .choes {
      /deep/ .el-input--suffix .el-input__inner {
        height: 28px;
      }
      .choesSele {
        height: 28px !important;
      }
    }
  }
}
</style>
